<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body  >
    <button class="btn1"  >按钮1</button>
    <span class="s1">你好</span>
    <br>
   用户名： <input type="text" class="pro-name"  placeholder="请输入用户名" />
             <span class="msg-tip">*</span>

    <br>
    请选择省份：
    <select class="province_select"  >
        <option>----请选择省份-----</option>
        <option>北京</option>
        <option>江苏省</option>
        <option>安徽省</option>
        <option>山东省</option>
    </select>
    <br>
    请选择优惠券：
    <select class="coupon_select" >
    </select>

    
    <script src="js/is_03事件.js">

    </script>

<!-- 
    <script>

        // onclick, onmouseover ,onblur,onchange

        // 单击事件 onclick
        var btn1 = document.querySelector(".btn1");
        btn1.onclick = add;

        function add(){
            var a = 10;
            var b = 20;
            var c = a+b;
            console.log("c = " + c)
        }


        // 鼠标悬浮 onmouseover
        btn1.onmouseover = function(){
                document.querySelector(".s1").style.color= "red";
        }

        // 光标移开输入框 onblur
        var proNameEle = document.querySelector(".pro-name");
        var msgTipEle = document.querySelector(".msg-tip");
      

        proNameEle.onblur= function(){
            msgTipEle.innerText = "";            
           var proName =  proNameEle.value ;
           
           if(proName == '' || proName == null){
                msgTipEle.innerText = "商品名称不能为空";
           }  

        }


        // 内容产生修改 onchange
      var provinceEle=   document.querySelector(".province_select");
      provinceEle.onchange= function(){
        var selectedProvince = provinceEle.value;
        console.log("选中的省份是：" + selectedProvince);
      }
    </script> -->
</body>
</html>